@import "../../styles/base";

.product-shop-container {
  width: 100%;
  background-color: $bg-color-light;

  .product-tab {
    position: fixed;
    top: 0;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background-color: $bg-color-light;
    z-index: 999;
    box-shadow: 0 3px 5px rgba(200, 200, 200, .8);

    .product-tab-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 49%;
      padding-top: 41px;
      padding-bottom: 34px;
      color: $font-color-tab-title;

      .text {
        font-size: 35px;
        line-height: 35px;
        margin-left: 15px;
      }
    }

    .active {
      border-bottom: solid 6px $font-color-blue;
      color: $font-color-blue;
    }

    .divider-img {
      width: 1px;
      height: 73px;
    }
  }

  .fast-product-banner {
    width: 100%;
    height: 286px;
    margin-top: 2px;
    padding-top: 113px;
  }

  .bank-product-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 36px;
    padding-bottom: 41px;
    background-color: $bg-color-base;
    padding-top: 136px;

    .row {
      display: inline-flex;
      justify-content: space-around;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .circle {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 87px;
          height: 87px;
          border-radius: 50%;
        }

        .image {
          width: 45px;
          height: 45px;
        }

        .text {
          font-size: 25px;
          color: $font-color-grey;
          line-height: 25px;
          margin-top: 23px;
        }
      }
    }

    .row:nth-child(2) {
      margin-top: 33px;
    }

    .row:nth-child(1) {
      .item:nth-child(1) {
        .circle {
          background-color: #fb6860;
        }

        .image {
          width: 42px;
          height: 46px;
        }
      }
    }

    .row:nth-child(1) {
      .item:nth-child(2) {
        .circle {
          background-color: #fcc125;
        }

        .image {
          width: 45px;
          height: 45px;
        }
      }
    }

    .row:nth-child(1) {
      .item:nth-child(3) {
        .circle {
          background-color: #52bdff;
        }
      }
    }

    .row:nth-child(1) {
      .item:nth-child(4) {
        .circle {
          background-color: #6bd18f;
        }

        .image {
          width: 23px;
          height: 54px;
        }
      }
    }

    .row:nth-child(2) {
      .item:nth-child(1) {
        .circle {
          background-color: #ff8a6e;
        }

        .image {
          width: 46px;
          height: 46px;
        }
      }
    }

    .row:nth-child(2) {
      .item:nth-child(2) {
        .circle {
          background-color: #99a1e9;
        }

        .image {
          width: 43px;
          height: 47px;
        }
      }
    }

    .row:nth-child(2) {
      .item:nth-child(3) {
        .circle {
          background-color: #ff8116;
        }

        .image {
          width: 43px;
          height: 40px;
        }
      }
    }

    .row:nth-child(2) {
      .item:nth-child(4) {
        .circle {
          background-color: #01c2eb;
        }

        .image {
          width: 46px;
          height: 42px;
        }
      }
    }
  }

  .product-list-box {
    width: 100%;

    .filter-selection-box {
      width: 100%;
      margin-top: 12px;
      height: 51px;
    }

    .product-list-ct {
      display: block;
      margin-top: 52px;
    }
  }

  .hide {
    display: none;
  }

  .show {
    display: block;
  }
}
